<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账单</title>
    <link th:href="@{/layer/css/layui.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/css/styleapp.css}" />
    <script th:src="@{/js/flexible.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/zepto.min.js}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}" ></script>
    <script th:src="@{/layer/layui.js}"></script>
    <style>
        .layui-form-label {
            width: 100px;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10">
            <div class="nav-bar">
                <span class="back"></span>
                <span>充值</span>
            </div>
            <div class="container">
                <form  class="layui-form" id="userFrm">
                <h2>充值金额</h2>
                <input th:value="${mm.getMemberid()}" class="hidden" id="Memberid">
                <div class="quick-pay">
                    <ul>
                        <li class="active"><span>50</span>元</li>
                        <li><span>100</span>元</li>
                        <li><span>300</span>元</li>
                        <li><span>500</span>元</li>
                    </ul>
                </div>
                <h2>其他充值金额</h2>
                <div class="other-pay">
                    <input type="text" name="money" value="" id="balance" placeholder="0"/>
                </div>
                <h2>支付方式</h2>
                <div class="pay-type">
                    <ul>
                        <li class="active">
                            <div class="type">
                                <i class="wx"></i>
                                <span>微信支付<sup>优惠</sup></span>
                            </div>
                            <i class="check"></i>
                        </li>
                        <li>
                            <div class="type">
                                <i class="ali"></i>
                                <span>支付宝支付</span>
                            </div>
                            <i class="check"></i>
                        </li>
                        <li>
                            <div class="type">
                                <i class="bank"></i>
                                <span>银联支付</span>
                            </div>
                            <i class="check"></i>
                        </li>
                        <li class="hidden">
                            <div class="type">
                                <i class="ali"></i>
                                <span>花呗支付</span>
                            </div>
                            <i class="check"></i>
                        </li>
                    </ul>
                    <p class="more">+&nbsp;<span>点击查看更多</span></p>
                </div>
                <!--充值金额-->
                <div class="money">
                    <p>充值金额<span>￥ <i>5</i></span></p>
                    <button class="layui-btn" lay-submit="" lay-filter="updateUser" >充值</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var form;
    var layer;
    // 快捷支付
    $('.quick-pay ul li').click(function(){
        var money = $(this).find('span').text()
        $(this).addClass('active').siblings().removeClass('active')
        $('.money').find('i').text(money)
        $("#balance").val(money);
    })
    // 其他金额
    $('.other-pay input').bind('input propertychange',function(){
        if(!/^[0-9]*$/.test($(this).val()) || $(this).val()==0){
            $(this).val("")
            alert('请输入正确金额')
            return
        }
        $('.quick-pay ul li').removeClass('active')
        var money = $(this).val()
        $('.money').find('i').text(money)
    })
    // 支付方式选择
    $('.pay-type ul li').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
    })
    // 查看更多
    $('.pay-type .more').click(function(){
        $(this).css('visibility','hidden')
        $('.pay-type ul li').removeClass('hidden')
    })

    layui.use(['form', 'layer', 'jquery', 'laydate'], function () {
        form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        //如果父页面有layer就是用父页面的，没有就导入
        layer = parent.layer === undefined ? layui.layer : parent.layer;

        //监听提交，使用layui form submit事件
        form.on('submit(updateUser)', function () {
            var mem = $("#Memberid").val();
            var data = $("#balance").val();
            $.post(
                '/member/savabalance',
                {"balance":data, "Memberid":mem },
                function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        //弹出成功的提示
                        layer.msg(data.msg, {icon: 1, time: 2000});
                        //重载表格
                        parent.tableIns.reload();
                        //关闭窗口
                        var index = layer.getFrameIndex(window.name);
                        layer.close(index);
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 3000});
                    }
                }
            );
            return false;
        });

        /**
         * 监听用户姓名失去焦点事件，请求后台自动生成对应的全拼拼音
         */

    });
</script>
</body>
</html>